<script setup lang="ts">
defineOptions({
  name: "limit"
});

import { ref, reactive, watch, computed, markRaw, inject } from "vue";
import type { FormInstance, FormRules } from "px-ui";
import {
  useUslMin,
  useUclMin,
  useUwlMin,
  useU3lMin,
  useTargetMin,
  useLwlMin,
  useLclMin,
  useLslMin,
  useL3lMin,
  useUslMax,
  useUclMax,
  useUwlMax,
  useU3lMax,
  useTargetMax,
  useLwlMax,
  useLclMax,
  useLslMax,
  useL3lMax,
  checkUslValue,
  checkUclValue,
  checkUwlValue,
  checkU3lValue,
  checkTargetValue,
  checkLwlValue,
  checkLclValue,
  checkLslValue,
  checkL3lValue
} from "./hooks";
import { initDefaultColor } from "../hooks";

interface RuleForm {
  uslValue: number;
  uslColor: string;
  uclValue: number;
  uclColor: string;
  uwlValue: number;
  uwlColor: string;
  u3lValue: number;
  targetValue: number;
  targetColor: string;
  lwlValue: number;
  lwlColor: string;
  lclValue: number;
  lclColor: string;
  lslValue: number;
  lslColor: string;
  l3lValue: number;
}

const limitRuleForm = defineModel({
  type: Object as PropType<RuleForm>,
  default: () => ({
    uslValue: undefined,
    uslColor: initDefaultColor("uslColor"),
    uclValue: undefined,
    uclColor: initDefaultColor("uclColor"),
    uwlValue: undefined,
    uwlColor: initDefaultColor("uwlColor"),
    u3lValue: undefined,
    targetValue: undefined,
    targetColor: initDefaultColor("targetColor"),
    lwlValue: undefined,
    lwlColor: initDefaultColor("lwlColor"),
    lclValue: undefined,
    lclColor: initDefaultColor("lclColor"),
    lslValue: undefined,
    lslColor: initDefaultColor("lslColor"),
    l3lValue: undefined
  })
});

const predefineColors: Array<string> = ["#ff4500", "#ff8c00", "#ffd700", "#90ee90", "#00ced1", "#1e90ff", "#c71585"];

const limitRuleFormRef = ref<FormInstance | null>(null);

const baseInfoData = inject("baseInfoData", ref<Record<string, any>>({ controlLine: [], startValue: undefined }));

const limitRules = reactive<FormRules<RuleForm>>({
  uslValue: [
    {
      validator: (rule: any, value: any, callback: any) => checkUslValue(rule, value, callback, limitRuleForm.value, baseInfoData.value),
      trigger: "blur"
    }
  ],
  uslColor: [{ required: false, message: "请选择USL线色值", trigger: ["blur", "change"] }],
  uclValue: [
    {
      validator: (rule: any, value: any, callback: any) => checkUclValue(rule, value, callback, limitRuleForm.value, baseInfoData.value),
      trigger: "blur"
    }
  ],
  uclColor: [{ required: false, message: "请选择UCL线色值", trigger: ["blur", "change"] }],
  uwlValue: [
    {
      validator: (rule: any, value: any, callback: any) => checkUwlValue(rule, value, callback, limitRuleForm.value, baseInfoData.value),
      trigger: "blur"
    }
  ],
  uwlColor: [{ required: false, message: "请选择UWL线色值", trigger: ["blur", "change"] }],
  u3lValue: [
    {
      validator: (rule: any, value: any, callback: any) => checkU3lValue(rule, value, callback, limitRuleForm.value, baseInfoData.value),
      trigger: "blur"
    }
  ],
  targetValue: [
    {
      validator: (rule: any, value: any, callback: any) => checkTargetValue(rule, value, callback, limitRuleForm.value, baseInfoData.value),
      trigger: "blur"
    }
  ],
  targetColor: [{ required: false, message: "请选择Target线色值", trigger: ["blur", "change"] }],
  lwlValue: [
    {
      validator: (rule: any, value: any, callback: any) => checkLwlValue(rule, value, callback, limitRuleForm.value, baseInfoData.value),
      trigger: "blur"
    }
  ],
  lwlColor: [{ required: false, message: "请选择LWL线色值", trigger: ["blur", "change"] }],
  lclValue: [
    {
      validator: (rule: any, value: any, callback: any) => checkLclValue(rule, value, callback, limitRuleForm.value, baseInfoData.value),
      trigger: "blur"
    }
  ],
  lclColor: [{ required: false, message: "请选择LCL线色值", trigger: ["blur", "change"] }],
  lslValue: [
    {
      validator: (rule: any, value: any, callback: any) => checkLslValue(rule, value, callback, limitRuleForm.value, baseInfoData.value),
      trigger: "blur"
    }
  ],
  lslColor: [{ required: false, message: "请选择LSL线色值", trigger: ["blur", "change"] }],
  l3lValue: [
    {
      validator: (rule: any, value: any, callback: any) => checkL3lValue(rule, value, callback, limitRuleForm.value, baseInfoData.value),
      trigger: "blur"
    }
  ]
});

const upDisabled = computed(() => !baseInfoData.value.controlLine?.includes("up"));
const downDisabled = computed(() => !baseInfoData.value.controlLine?.includes("down"));

watch(
  () => baseInfoData.value.controlLine,
  (newVal, oldVal) => {
    for (const v of oldVal) {
      if (!newVal?.includes(v)) {
        if (v === "up") {
          limitRuleFormRef.value.clearValidate(["uslValue", "uclValue", "uwlValue", "u3lValue"]);
        } else if (v === "down") {
          limitRuleFormRef.value.clearValidate(["lwlValue", "lclValue", "lslValue", "l3lValue"]);
        }
        break;
      }
    }
  }
);

/**  计算最小值  */
const uslMin = useUslMin(baseInfoData.value, limitRuleForm.value);
const uclMin = useUclMin(baseInfoData.value, limitRuleForm.value);
const uwlMin = useUwlMin(baseInfoData.value, limitRuleForm.value);
const u3lMin = useU3lMin(baseInfoData.value, limitRuleForm.value);
const targetMin = useTargetMin(baseInfoData.value, limitRuleForm.value);
const lwlMin = useLwlMin(baseInfoData.value, limitRuleForm.value);
const lclMin = useLclMin(baseInfoData.value, limitRuleForm.value);
const lslMin = useLslMin(baseInfoData.value, limitRuleForm.value);
const l3lMin = useL3lMin(baseInfoData.value);
/**  计算最大值  */
const uslMax = useUslMax();
const uclMax = useUclMax(baseInfoData.value, limitRuleForm.value);
const uwlMax = useUwlMax(baseInfoData.value, limitRuleForm.value);
const u3lMax = useU3lMax(baseInfoData.value, limitRuleForm.value);
const targetMax = useTargetMax(baseInfoData.value, limitRuleForm.value);
const lwlMax = useLwlMax(baseInfoData.value, limitRuleForm.value);
const lclMax = useLclMax(baseInfoData.value, limitRuleForm.value);
const lslMax = useLslMax(baseInfoData.value, limitRuleForm.value);
const l3lMax = useL3lMax(baseInfoData.value, limitRuleForm.value);

const emits = defineEmits(["change"]);

const clearForm = () => {
  limitRuleForm.value.uslValue = undefined;
  limitRuleForm.value.uslColor = initDefaultColor("uslColor");
  limitRuleForm.value.uclValue = undefined;
  limitRuleForm.value.uclColor = initDefaultColor("uclColor");
  limitRuleForm.value.uwlValue = undefined;
  limitRuleForm.value.uwlColor = initDefaultColor("uwlColor");
  limitRuleForm.value.u3lValue = undefined;
  limitRuleForm.value.targetValue = undefined;
  limitRuleForm.value.targetColor = initDefaultColor("targetColor");
  limitRuleForm.value.lwlValue = undefined;
  limitRuleForm.value.lwlColor = initDefaultColor("lwlColor");
  limitRuleForm.value.lclValue = undefined;
  limitRuleForm.value.lclColor = initDefaultColor("lclColor");
  limitRuleForm.value.lslValue = undefined;
  limitRuleForm.value.lslColor = initDefaultColor("lslColor");
  limitRuleForm.value.l3lValue = undefined;
};

const validate = (): Promise<Record<string, any>> => {
  return new Promise((resolve, reject) => {
    if (!limitRuleFormRef.value) return reject(false);
    limitRuleFormRef.value.validate(valid => {
      if (valid) {
        resolve(markRaw(limitRuleForm.value));
      } else {
        reject(false);
      }
    });
  });
};

const reset = () => {
  if (!limitRuleFormRef.value) return;
  limitRuleFormRef.value.resetFields();
};

const initColor = (specColor: Array<any>) => {
  if (!specColor?.length) return;
  for (const item of specColor) {
    const { code = "", colorValue = "" } = item;
    if (code && colorValue) {
      limitRuleForm.value[code] = initDefaultColor(code, colorValue);
    }
  }
};

const init = (data: any) => {
  limitRuleFormRef.value.resetFields();
  if (!data) return;
  const {
    uslValue = undefined,
    uclValue = undefined,
    uwlValue = undefined,
    u3lValue = undefined,
    targetValue = undefined,
    lwlValue = undefined,
    lclValue = undefined,
    lslValue = undefined,
    l3lValue = undefined,
    specColor = []
  } = data;
  limitRuleForm.value.uslValue = uslValue;
  limitRuleForm.value.uclValue = uclValue;
  limitRuleForm.value.uwlValue = uwlValue;
  limitRuleForm.value.u3lValue = u3lValue;
  limitRuleForm.value.targetValue = targetValue;
  limitRuleForm.value.lwlValue = lwlValue;
  limitRuleForm.value.lclValue = lclValue;
  limitRuleForm.value.lslValue = lslValue;
  limitRuleForm.value.l3lValue = l3lValue;
  initColor(specColor);
};

defineExpose({
  limitRuleFormRef,
  limitRuleForm,
  clearForm,
  validate,
  reset,
  init
});
</script>

<template>
  <px-form ref="limitRuleFormRef" :model="limitRuleForm" :rules="limitRules" label-width="100px" class="limit-form" scroll-to-error status-icon>
    <div class="limit-form-content">
      <div class="limit-form-item">
        <div class="limit-form-item-title">上单边</div>
        <px-form-item label="USL值" prop="uslValue">
          <px-input
            v-model.trim.number="limitRuleForm.uslValue"
            class="px-input-number-no-controls"
            type="number"
            clearable
            :disabled="upDisabled"
            placeholder="请输入USL值"
          />

          <px-color-picker v-model="limitRuleForm.uslColor" :disabled="upDisabled" show-alpha :predefine="predefineColors" />
        </px-form-item>

        <px-form-item label="UCL值" prop="uclValue">
          <px-input
            v-model.trim.number="limitRuleForm.uclValue"
            class="px-input-number-no-controls"
            type="number"
            clearable
            :disabled="upDisabled"
            placeholder="请输入UCL值"
          />

          <px-color-picker v-model="limitRuleForm.uclColor" :disabled="upDisabled" show-alpha :predefine="predefineColors" />
        </px-form-item>

        <px-form-item label="UWL值" prop="uwlValue">
          <px-input
            v-model.trim.number="limitRuleForm.uwlValue"
            class="px-input-number-no-controls"
            type="number"
            clearable
            :disabled="upDisabled"
            placeholder="请输入UWL值"
          />

          <px-color-picker v-model="limitRuleForm.uwlColor" :disabled="upDisabled" show-alpha :predefine="predefineColors" />
        </px-form-item>

        <px-form-item label="U3L值" prop="u3lValue">
          <px-input
            v-model.trim.number="limitRuleForm.u3lValue"
            class="px-input-number-no-controls"
            type="number"
            clearable
            :disabled="upDisabled"
            placeholder="请输入U3L值"
          />
        </px-form-item>
      </div>
      <div class="limit-form-line" />
      <div class="limit-form-item limit-form-target">
        <px-form-item label="Target值" prop="targetValue">
          <px-input
            v-model.trim.number="limitRuleForm.targetValue"
            class="px-input-number-no-controls"
            type="number"
            clearable
            placeholder="请输入Target值"
          />

          <px-color-picker v-model="limitRuleForm.targetColor" show-alpha :predefine="predefineColors" />
        </px-form-item>
      </div>
      <div class="limit-form-line" />
      <div class="limit-form-item">
        <div class="limit-form-item-title">下单边</div>

        <px-form-item label="LWL值" prop="lwlValue">
          <px-input
            v-model.trim.number="limitRuleForm.lwlValue"
            class="px-input-number-no-controls"
            type="number"
            clearable
            :disabled="downDisabled"
            placeholder="请输入LWL值"
          />

          <px-color-picker v-model="limitRuleForm.lwlColor" :disabled="downDisabled" show-alpha :predefine="predefineColors" />
        </px-form-item>

        <px-form-item label="LCL值" prop="lclValue">
          <px-input
            v-model.trim.number="limitRuleForm.lclValue"
            class="px-input-number-no-controls"
            type="number"
            clearable
            :disabled="downDisabled"
            placeholder="请输入LCL值"
          />

          <px-color-picker v-model="limitRuleForm.lclColor" :disabled="downDisabled" show-alpha :predefine="predefineColors" />
        </px-form-item>

        <px-form-item label="LSL值" prop="lslValue">
          <px-input
            v-model.trim.number="limitRuleForm.lslValue"
            class="px-input-number-no-controls"
            type="number"
            clearable
            :disabled="downDisabled"
            placeholder="请输入LSL值"
          />

          <px-color-picker v-model="limitRuleForm.lslColor" :disabled="downDisabled" show-alpha :predefine="predefineColors" />
        </px-form-item>

        <px-form-item label="L3L值" prop="l3lValue">
          <px-input
            v-model.trim.number="limitRuleForm.l3lValue"
            class="px-input-number-no-controls"
            type="number"
            clearable
            :disabled="downDisabled"
            placeholder="请输入L3L值"
          />
        </px-form-item>
      </div>
    </div>
  </px-form>
</template>

<style lang="scss" scoped>
.limit-form {
  .limit-form-content {
    display: flex;
    align-items: stretch;

    .limit-form-item {
      box-sizing: border-box;
      flex: 1;
      padding: 16px;
      padding-right: 26px;
      padding-bottom: 0;

      .limit-form-item-title {
        width: 100%;
        margin-bottom: 16px;
        font-weight: 600;
        color: #666;
        text-align: center;
      }

      .px-form-item {
        :deep(.px-form-item__content) {
          flex-wrap: nowrap;
          gap: 16px;
          justify-content: space-between;

          .px-input-number .px-input__inner {
            text-align: left;
          }

          .px-input {
            width: calc(100% - 58px);
          }
        }
      }
    }

    .limit-form-target {
      display: flex;
      align-items: center;

      .px-form-item {
        width: 100%;
      }
    }

    .limit-form-line {
      width: 1px;
      background-color: #e9e9e9;
    }
  }
}
</style>
